<template>
	<view class="addvisitor-container">

		<view class="visitor-form">

			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">

				</u-col>

				<u-col span="10">
					<u--form labelPosition="left" :model="card" :rules="rules" ref="formcard" :errorType="errorType">


						<u-form-item prop="rechargeAmount" borderBottom ref="rechargeAmount">
							<u--input v-model="card.rechargeAmount" border="none" clearable placeholder="请输入金额"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>


						<u-form-item prop="rechargeMode" borderBottom ref="rechargeMode">
							<u-radio-group v-model="card.rechargeMode" placement="row" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '8px',marginRight: '8px'}"
									v-for="(item, index) in radiolist1" :key="index" :label="item.name"
									:name="item.value">
								</u-radio>
							</u-radio-group>
						</u-form-item>

					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u-button type="primary" text="充值" @click="save"></u-button>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>

		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				radiolist1: [{
						name: '微信支付',
						value: 1
					},
					{
						name: '支付宝支付',
						value: 2
					},
					{
						name: '银联支付',
						value: 3
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中


				card: {
					rechargeAmount: '',
					rechargeMode: 1,
				},
				rules: {
					'rechargeMode': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'rechargeAmount': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},

				},
				errorType: 'border-bottom', // 错误提示类型:下划线
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			save() {
				// console.log('values',this.notice.releaseStatus)
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/rechargeTable/api/addUserRecharge',
					// url: 'https://www.gzzyue.com/prod-api/system/campusNotice/api/addNotice',
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: this.card,
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								uni.$u.toast('充值成功')
								uni.navigateBack()

								uni.$emit('addCard', this.card)
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},

			getCalender(e) {
				console.log('e', e)
				this.notice.appointmentName = e[0]
				this.closeCalender()
			}
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	button {
		margin-top: 10px;
	}
</style>
